.border-box { box-sizing: border-box; }
 /*
 
    ASPECT RATIOS
 
 */
 /* This is for fluid media that is embedded from third party sites like youtube, vimeo etc.
  * Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e
  * Make sure there are no height and width attributes on the embedded media.
  * Adapted from: https://github.com/suitcss/components-flex-embed
  *
  * Example:
  *
  * <div class="aspect-ratio aspect-ratio--16x9">
  *  <iframe class="aspect-ratio--object"></iframe>
  * </div>
  *
  * */
 .aspect-ratio { height: 0; position: relative; }
 .aspect-ratio--16x9 { padding-bottom: 56.25%; }
 .aspect-ratio--9x16 { padding-bottom: 177.77%; }
 .aspect-ratio--4x3 { padding-bottom: 75%; }
 .aspect-ratio--3x4 { padding-bottom: 133.33%; }
 .aspect-ratio--6x4 { padding-bottom: 66.6%; }
 .aspect-ratio--4x6 { padding-bottom: 150%; }
 .aspect-ratio--8x5 { padding-bottom: 62.5%; }
 .aspect-ratio--5x8 { padding-bottom: 160%; }
 .aspect-ratio--7x5 { padding-bottom: 71.42%; }
 .aspect-ratio--5x7 { padding-bottom: 140%; }
 .aspect-ratio--1x1 { padding-bottom: 100%; }
 .aspect-ratio--object { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; }
 /*
 
    IMAGES
    Docs: http://tachyons.io/docs/elements/images/
 
 */
 /* Responsive images! */
 img { max-width: 100%; }
 /*
 
    BACKGROUND SIZE
    Docs: http://tachyons.io/docs/themes/background-size/
 
    Media Query Extensions:
      -ns = not-small
      -m  = medium
      -l  = large
 
 */
 /*
   Often used in combination with background image set as an inline style
   on an html element.
 */
 .cover { background-size: cover !important; }
 .contain { background-size: contain !important; }
 /*
 
     BACKGROUND POSITION
 
     Base:
     bg = background
 
     Modifiers:
     -center = center center
     -top = top center
     -right = center right
     -bottom = bottom center
     -left = center left
 
     Media Query Extensions:
       -ns = not-small
       -m  = medium
       -l  = large
 
  */
 .bg-center { background-repeat: no-repeat; background-position: center center; }
 .bg-top { background-repeat: no-repeat; background-position: top center; }
 .bg-right { background-repeat: no-repeat; background-position: center right; }
 .bg-bottom { background-repeat: no-repeat; background-position: bottom center; }
 .bg-left { background-repeat: no-repeat; background-position: center left; }
 /*
 
    OUTLINES
 
    Media Query Extensions:
      -ns = not-small
      -m  = medium
      -l  = large
 
 */
 .outline { outline: 1px solid; }
 .outline-transparent { outline: 1px solid transparent; }
 .outline-0 { outline: 0; }
 /*
 
     BORDERS
     Docs: http://tachyons.io/docs/themes/borders/
 
     Base:
       b = border
 
     Modifiers:
       a = all
       t = top
       r = right
       b = bottom
       l = left
       n = none
 
    Media Query Extensions:
      -ns = not-small
      -m  = medium
      -l  = large
 
 */
 .ba { border-style: solid; border-width: 1px; }
 .bt { border-top-style: solid; border-top-width: 1px; }
 .br { border-right-style: solid; border-right-width: 1px; }
 .bb { border-bottom-style: solid; border-bottom-width: 1px; }
 .bl { border-left-style: solid; border-left-width: 1px; }
 .bn { border-style: none; border-width: 0; }
 /*
 
    BORDER COLORS
    Docs: http://tachyons.io/docs/themes/borders/
 
    Border colors can be used to extend the base
    border classes ba,bt,bb,br,bl found in the _borders.css file.
 
    The base border class by default will set the color of the border
    to that of the current text color. These classes are for the cases
    where you desire for the text and border colors to be different.
 
    Base:
      b = border
 
    Modifiers:
    --color-name = each color variable name is also a border color name
 
 */
 .b--black { border-color: #000; }
 .b--near-black { border-color: #111; }
 .b--dark-gray { border-color: #333; }
 .b--mid-gray { border-color: #555; }
 .b--gray { border-color: #777; }
 .b--silver { border-color: #999; }
 .b--light-silver { border-color: #aaa; }
 .b--moon-gray { border-color: #ccc; }
 .b--light-gray { border-color: #eee; }
 .b--near-white { border-color: #f4f4f4; }
 .b--white { border-color: #fff; }
 .b--white-90 { border-color: rgba( 255, 255, 255, .9 ); }
 .b--white-80 { border-color: rgba( 255, 255, 255, .8 ); }
 .b--white-70 { border-color: rgba( 255, 255, 255, .7 ); }
 .b--white-60 { border-color: rgba( 255, 255, 255, .6 ); }
 .b--white-50 { border-color: rgba( 255, 255, 255, .5 ); }
 .b--white-40 { border-color: rgba( 255, 255, 255, .4 ); }
 .b--white-30 { border-color: rgba( 255, 255, 255, .3 ); }
 .b--white-20 { border-color: rgba( 255, 255, 255, .2 ); }
 .b--white-10 { border-color: rgba( 255, 255, 255, .1 ); }
 .b--white-05 { border-color: rgba( 255, 255, 255, .05 ); }
 .b--white-025 { border-color: rgba( 255, 255, 255, .025 ); }
 .b--white-0125 { border-color: rgba( 255, 255, 255, .0125 ); }
 .b--black-90 { border-color: rgba( 0, 0, 0, .9 ); }
 .b--black-80 { border-color: rgba( 0, 0, 0, .8 ); }
 .b--black-70 { border-color: rgba( 0, 0, 0, .7 ); }
 .b--black-60 { border-color: rgba( 0, 0, 0, .6 ); }
 .b--black-50 { border-color: rgba( 0, 0, 0, .5 ); }
 .b--black-40 { border-color: rgba( 0, 0, 0, .4 ); }
 .b--black-30 { border-color: rgba( 0, 0, 0, .3 ); }
 .b--black-20 { border-color: rgba( 0, 0, 0, .2 ); }
 .b--black-10 { border-color: rgba( 0, 0, 0, .1 ); }
 .b--black-05 { border-color: rgba( 0, 0, 0, .05 ); }
 .b--black-025 { border-color: rgba( 0, 0, 0, .025 ); }
 .b--black-0125 { border-color: rgba( 0, 0, 0, .0125 ); }
 .b--dark-red { border-color: #e7040f; }
 .b--red { border-color: #ff4136; }
 .b--light-red { border-color: #ff725c; }
 .b--orange { border-color: #ff6300; }
 .b--gold { border-color: #ffb700; }
 .b--yellow { border-color: #ffd700; }
 .b--light-yellow { border-color: #fbf1a9; }
 .b--purple { border-color: #5e2ca5; }
 .b--light-purple { border-color: #a463f2; }
 .b--dark-pink { border-color: #d5008f; }
 .b--hot-pink { border-color: #ff41b4; }
 .b--pink { border-color: #ff80cc; }
 .b--light-pink { border-color: #ffa3d7; }
 .b--dark-green { border-color: #137752; }
 .b--green { border-color: #19a974; }
 .b--light-green { border-color: #9eebcf; }
 .b--navy { border-color: #001b44; }
 .b--dark-blue { border-color: #00449e; }
 .b--blue { border-color: #357edd; }
 .b--light-blue { border-color: #96ccff; }
 .b--lightest-blue { border-color: #cdecff; }
 .b--washed-blue { border-color: #f6fffe; }
 .b--washed-green { border-color: #e8fdf5; }
 .b--washed-yellow { border-color: #fffceb; }
 .b--washed-red { border-color: #ffdfdf; }
 .b--transparent { border-color: transparent; }
 .b--inherit { border-color: inherit; }
 .b--initial { border-color: initial; }
 .b--unset { border-color: unset; }
 /*
 
    BORDER RADIUS
    Docs: http://tachyons.io/docs/themes/border-radius/
 
    Base:
      br   = border-radius
 
    Modifiers:
      0    = 0/none
      1    = 1st step in scale
      2    = 2nd step in scale
      3    = 3rd step in scale
      4    = 4th step in scale
 
    Literal values:
      -100 = 100%
      -pill = 9999px
 
    Media Query Extensions:
      -ns = not-small
      -m  = medium
      -l  = large
 
 */
 .br0 { border-radius: 0; }
 .br1 { border-radius: .125rem; }
 .br2 { border-radius: .25rem; }
 .br3 { border-radius: .5rem; }
 .br4 { border-radius: 1rem; }
 .br-100 { border-radius: 100%; }
 .br-pill { border-radius: 9999px; }
 .br--bottom { border-top-left-radius: 0; border-top-right-radius: 0; }
 .br--top { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
 .br--right { border-top-left-radius: 0; border-bottom-left-radius: 0; }
 .br--left { border-top-right-radius: 0; border-bottom-right-radius: 0; }
 .br-inherit { border-radius: inherit; }
 .br-initial { border-radius: initial; }
 .br-unset { border-radius: unset; }
 /*
 
    BORDER STYLES
    Docs: http://tachyons.io/docs/themes/borders/
 
    Depends on base border module in _borders.css
 
    Base:
      b = border-style
 
    Modifiers:
      --none   = none
      --dotted = dotted
      --dashed = dashed
      --solid  = solid
 
    Media Query Extensions:
      -ns = not-small
      -m  = medium
      -l  = large
 
  */
 .b--dotted { border-style: dotted; }
 .b--dashed { border-style: dashed; }
 .b--solid { border-style: solid; }
 .b--none { border-style: none; }
 /*
 
    BORDER WIDTHS
    Docs: http://tachyons.io/docs/themes/borders/
 
    Base:
      bw = border-width
 
    Modifiers:
      0 = 0 width border
      1 = 1st step in border-width scale
      2 = 2nd step in border-width scale
      3 = 3rd step in border-width scale
      4 = 4th step in border-width scale
      5 = 5th step in border-width scale
 
    Media Query Extensions:
      -ns = not-small
      -m  = medium
      -l  = large
 
 */
 .bw0 { border-width: 0; }
 .bw1 { border-width: .125rem; }
 .bw2 { border-width: .25rem; }
 .bw3 { border-width: .5rem; }
 .bw4 { border-width: 1rem; }
 .bw5 { border-width: 2rem; }
 /* Resets */
 .bt-0 { border-top-width: 0; }
 .br-0 { border-right-width: 0; }
 .bb-0 { border-bottom-width: 0; }
 .bl-0 { border-left-width: 0; }
 /*
 
   BOX-SHADOW
   Docs: http://tachyons.io/docs/themes/box-shadow/
 
   Media Query Extensions:
    -ns = not-small
    -m  = medium
    -l  = large
 
  */
 /*
 
    CODE
 
 */
 .pre { overflow-x: auto; overflow-y: hidden; overflow: scroll; }
 /*
 
    COORDINATES
    Docs: http://tachyons.io/docs/layout/position/
 
    Use in combination with the position module.
 
    Base:
      top
      bottom
      right
      left
 
    Modifiers:
      -0  = literal value 0
      -1  = literal value 1
      -2  = literal value 2
      --1 = literal value -1
      --2 = literal value -2
 
    Media Query Extensions:
      -ns = not-small
      -m  = medium
      -l  = large
 
 */
 .top-0 { top: 0; }
 .right-0 { right: 0; }
 .bottom-0 { bottom: 0; }
 .left-0 { left: 0; }
 .top-1 { top: 1rem; }
 .right-1 { right: 1rem; }
 .bottom-1 { bottom: 1rem; }
 .left-1 { left: 1rem; }
 .top-2 { top: 2rem; }
 .right-2 { right: 2rem; }
 .bottom-2 { bottom: 2rem; }
 .left-2 { left: 2rem; }
 .top--1 { top: -1rem; }
 .right--1 { right: -1rem; }
 .bottom--1 { bottom: -1rem; }
 .left--1 { left: -1rem; }
 .top--2 { top: -2rem; }
 .right--2 { right: -2rem; }
 .bottom--2 { bottom: -2rem; }
 .left--2 { left: -2rem; }
 .absolute--fill { top: 0; right: 0; bottom: 0; left: 0; }
 /*
 
    DISPLAY
    Docs: http://tachyons.io/docs/layout/display
 
    Base:
     d = display
 
    Modifiers:
     n     = none
     b     = block
     ib    = inline-block
     it    = inline-table
     t     = table
     tc    = table-cell
     t-row          = table-row
     t-columm       = table-column
     t-column-group = table-column-group
 
    Media Query Extensions:
      -ns = not-small
      -m  = medium
      -l  = large
 
 */
 .dn { display: none; }
 .di { display: inline; }
 .db { display: block; }
 .dib { display: inline-block; }
 .dit { display: inline-table; }
 .dt { display: table; }
 .dtc { display: table-cell; }
 .dt-row { display: table-row; }
 .dt-row-group { display: table-row-group; }
 .dt-column { display: table-column; }
 .dt-column-group { display: table-column-group; }
 /*
   This will set table to full width and then
   all cells will be equal width
 */
 .dt--fixed { table-layout: fixed; width: 100%; }
 /*
 
   FLEXBOX
 
   Media Query Extensions:
    -ns = not-small
    -m  = medium
    -l  = large
 
 */
 .flex { display: flex; }
 .inline-flex { display: inline-flex; }
 /* 1. Fix for Chrome 44 bug.
  * https://code.google.com/p/chromium/issues/detail?id=506893 */
 .flex-auto { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ }
 .flex-none { flex: none; }
 .flex-column { flex-direction: column; }
 .flex-row { flex-direction: row; }
 .flex-wrap { flex-wrap: wrap; }
 .flex-nowrap { flex-wrap: nowrap; }
 .flex-wrap-reverse { flex-wrap: wrap-reverse; }
 .flex-column-reverse { flex-direction: column-reverse; }
 .flex-row-reverse { flex-direction: row-reverse; }
 .items-start { align-items: flex-start; }
 .items-end { align-items: flex-end; }
 .items-center { align-items: center; }
 .items-baseline { align-items: baseline; }
 .items-stretch { align-items: stretch; }
 .self-start { align-self: flex-start; }
 .self-end { align-self: flex-end; }
 .self-center { align-self: center; }
 .self-baseline { align-self: baseline; }
 .self-stretch { align-self: stretch; }
 .justify-start { justify-content: flex-start; }
 .justify-end { justify-content: flex-end; }
 .justify-center { justify-content: center; }
 .justify-between { justify-content: space-between; }
 .justify-around { justify-content: space-around; }
 .content-start { align-content: flex-start; }
 .content-end { align-content: flex-end; }
 .content-center { align-content: center; }
 .content-between { align-content: space-between; }
 .content-around { align-content: space-around; }
 .content-stretch { align-content: stretch; }
 .order-0 { order: 0; }
 .order-1 { order: 1; }
 .order-2 { order: 2; }
 .order-3 { order: 3; }
 .order-4 { order: 4; }
 .order-5 { order: 5; }
 .order-6 { order: 6; }
 .order-7 { order: 7; }
 .order-8 { order: 8; }
 .order-last { order: 99999; }
 .flex-grow-0 { flex-grow: 0; }
 .flex-grow-1 { flex-grow: 1; }
 .flex-shrink-0 { flex-shrink: 0; }
 .flex-shrink-1 { flex-shrink: 1; }
 /*
 
    FONT FAMILY GROUPS
    Docs: http://tachyons.io/docs/typography/font-family/
 
 */
 .sans-serif { font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif; }
 .serif { font-family: georgia, times, serif; }
 .system-sans-serif { font-family: sans-serif; }
 .system-serif { font-family: serif; }
 /* Monospaced Typefaces (for code) */
 /* From http://cssfontstack.com */
 code, .code { font-family: Consolas, monaco, monospace; }
 .courier { font-family: 'Courier Next', courier, monospace; }
 /* Sans-Serif Typefaces */
 .helvetica { font-family: 'helvetica neue', helvetica, sans-serif; }
 .avenir { font-family: 'avenir next', avenir, sans-serif; }
 /* Serif Typefaces */
 .athelas { font-family: athelas, georgia, serif; }
 .georgia { font-family: georgia, serif; }
 .times { font-family: times, serif; }
 .bodoni { font-family: "Bodoni MT", serif; }
 .calisto { font-family: "Calisto MT", serif; }
 .garamond { font-family: garamond, serif; }
 .baskerville { font-family: baskerville, serif; }
 /*
 
    FONT STYLE
    Docs: http://tachyons.io/docs/typography/font-style/
 
    Media Query Extensions:
      -ns = not-small
      -m  = medium
      -l  = large
 
 */
 .i { font-style: italic; }
 .fs-normal { font-style: normal; }
 /*
 
    FONT WEIGHT
    Docs: http://tachyons.io/docs/typography/font-weight/
 
    Base
      fw = font-weight
 
    Modifiers:
      1 = literal value 100
      2 = literal value 200
      3 = literal value 300
      4 = literal value 400
      5 = literal value 500
      6 = literal value 600
      7 = literal value 700
      8 = literal value 800
      9 = literal value 900
 
    Media Query Extensions:
      -ns = not-small
      -m  = medium
      -l  = large
 
 */
 .normal { font-weight: normal; }
 .b { font-weight: bold; }
 .fw1 { font-weight: 100; }
 .fw2 { font-weight: 200; }
 .fw3 { font-weight: 300; }
 .fw4 { font-weight: 400; }
 .fw5 { font-weight: 500; }
 .fw6 { font-weight: 600; }
 .fw7 { font-weight: 700; }
 .fw8 { font-weight: 800; }
 .fw9 { font-weight: 900; }
 /*
 
    FORMS
    
 */
 .input-reset { -webkit-appearance: none; -moz-appearance: none; }
 .button-reset::-moz-focus-inner, .input-reset::-moz-focus-inner { border: 0; padding: 0; }
 /*
 
    HEIGHTS
    Docs: http://tachyons.io/docs/layout/heights/
 
    Base:
      h = height
      min-h = min-height
      min-vh = min-height vertical screen height
      vh = vertical screen height
 
    Modifiers
      1 = 1st step in height scale
      2 = 2nd step in height scale
      3 = 3rd step in height scale
      4 = 4th step in height scale
      5 = 5th step in height scale
 
      -25   = literal value 25%
      -50   = literal value 50%
      -75   = literal value 75%
      -100  = literal value 100%
 
      -auto = string value of auto
      -inherit = string value of inherit
 
    Media Query Extensions:
      -ns = not-small
      -m  = medium
      -l  = large
 
 */
 /* Height Scale */
 .h1 { height: 1rem; }
 .h2 { height: 2rem; }
 .h3 { height: 4rem; }
 .h4 { height: 8rem; }
 .h5 { height: 16rem; }
 /* Height Percentages - Based off of height of parent */
 .h-25 { height: 25%; }
 .h-50 { height: 50%; }
 .h-75 { height: 75%; }
 .h-100 { height: 100%; }
 .min-h-100 { min-height: 100%; }
 /* Screen Height Percentage */
 .vh-25 { height: 25vh; }
 .vh-50 { height: 50vh; }
 .vh-75 { height: 75vh; }
 .vh-100 { height: 100vh; }
 .min-vh-100 { min-height: 100vh; }
 /* String Properties */
 .h-auto { height: auto; }
 .h-inherit { height: inherit; }
 /*
 
    LETTER SPACING
    Docs: http://tachyons.io/docs/typography/tracking/
 
    Media Query Extensions:
      -ns = not-small
      -m  = medium
      -l  = large
 
 */
 .tracked { letter-spacing: .1em; }
 .tracked-tight { letter-spacing: -.05em; }
 .tracked-mega { letter-spacing: .25em; }
 /*
 
    LINE HEIGHT / LEADING
    Docs: http://tachyons.io/docs/typography/line-height
 
    Media Query Extensions:
      -ns = not-small
      -m  = medium
      -l  = large
 
 */
 .lh-solid { line-height: 1; }
 .lh-title { line-height: 1.25; }
 .lh-copy { line-height: 1.5; }
 /*
 
    LINKS
    Docs: http://tachyons.io/docs/elements/links/
 
 */
 .link { text-decoration: none; transition: color .15s ease-in; }
 .link:link, .link:visited { transition: color .15s ease-in; }
 .link:hover { transition: color .15s ease-in; }
 .link:active { transition: color .15s ease-in; }
 .link:focus { transition: color .15s ease-in; outline: 1px dotted currentColor; }
 /*
 
    LISTS
    http://tachyons.io/docs/elements/lists/
 
 */
 .list { list-style-type: none; }
 /*
 
    WIDTHS
    Docs: http://tachyons.io/docs/layout/widths/
 
    Base:
      w = width
 
    Modifiers
      1 = 1st step in width scale
      2 = 2nd step in width scale
      3 = 3rd step in width scale
      4 = 4th step in width scale
      5 = 5th step in width scale
 
      -10  = literal value 10%
      -20  = literal value 20%
      -25  = literal value 25%
      -30  = literal value 30%
      -33  = literal value 33%
      -34  = literal value 34%
      -40  = literal value 40%
      -50  = literal value 50%
      -60  = literal value 60%
      -70  = literal value 70%
      -75  = literal value 75%
      -80  = literal value 80%
      -90  = literal value 90%
      -100 = literal value 100%
 
      -third      = 100% / 3 (Not supported in opera mini or IE8)
      -two-thirds = 100% / 1.5 (Not supported in opera mini or IE8)
      -auto       = string value auto
 
 
    Media Query Extensions:
      -ns = not-small
      -m  = medium
      -l  = large
 
 */
 /* Width Scale */
 .w1 { width: 1rem; }
 .w2 { width: 2rem; }
 .w3 { width: 4rem; }
 .w4 { width: 8rem; }
 .w5 { width: 16rem; }
 .w-10 { width: 10%; }
 .w-20 { width: 20%; }
 .w-25 { width: 25%; }
 .w-30 { width: 30%; }
 .w-33 { width: 33%; }
 .w-34 { width: 34%; }
 .w-40 { width: 40%; }
 .w-50 { width: 50%; }
 .w-60 { width: 60%; }
 .w-70 { width: 70%; }
 .w-75 { width: 75%; }
 .w-80 { width: 80%; }
 .w-90 { width: 90%; }
 .w-100 { width: 100%; }
 .w-third { width: 33.33333%; }
 .w-two-thirds { width: 66.66667%; }
 .w-auto { width: auto; }
 /*
 
     OVERFLOW
 
     Media Query Extensions:
       -ns = not-small
       -m  = medium
       -l  = large
 
  */
 .overflow-visible { overflow: visible; }
 .overflow-hidden { overflow: hidden; }
 .overflow-scroll { overflow: scroll; }
 .overflow-auto { overflow: auto; }
 .overflow-x-visible { overflow-x: visible; }
 .overflow-x-hidden { overflow-x: hidden; }
 .overflow-x-scroll { overflow-x: scroll; }
 .overflow-x-auto { overflow-x: auto; }
 .overflow-y-visible { overflow-y: visible; }
 .overflow-y-hidden { overflow-y: hidden; }
 .overflow-y-scroll { overflow-y: scroll; }
 .overflow-y-auto { overflow-y: auto; }
 /*
 
    POSITIONING
    Docs: http://tachyons.io/docs/layout/position/
 
    Media Query Extensions:
      -ns = not-small
      -m  = medium
      -l  = large
 
 */
 .static { position: static; }
 .relative { position: relative; }
 .absolute { position: absolute; }
 .fixed { position: fixed; }
 /*
 
     OPACITY
     Docs: http://tachyons.io/docs/themes/opacity/
 
 */
 .o-100 { opacity: 1; }
 .o-90 { opacity: .9; }
 .o-80 { opacity: .8; }
 .o-70 { opacity: .7; }
 .o-60 { opacity: .6; }
 .o-50 { opacity: .5; }
 .o-40 { opacity: .4; }
 .o-30 { opacity: .3; }
 .o-20 { opacity: .2; }
 .o-10 { opacity: .1; }
 .o-05 { opacity: .05; }
 .o-025 { opacity: .025; }
 .o-0 { opacity: 0; }
 /*
 
    SKINS
    Docs: http://tachyons.io/docs/themes/skins/
 
    Classes for setting foreground and background colors on elements.
    If you haven't declared a border color, but set border on an element, it will 
    be set to the current text color. 
 
 */
 /* Text colors */
 .black-90 { color: rgba( 0, 0, 0, .9 ); }
 .black-80 { color: rgba( 0, 0, 0, .8 ); }
 .black-70 { color: rgba( 0, 0, 0, .7 ); }
 .black-60 { color: rgba( 0, 0, 0, .6 ); }
 .black-50 { color: rgba( 0, 0, 0, .5 ); }
 .black-40 { color: rgba( 0, 0, 0, .4 ); }
 .black-30 { color: rgba( 0, 0, 0, .3 ); }
 .black-20 { color: rgba( 0, 0, 0, .2 ); }
 .black-10 { color: rgba( 0, 0, 0, .1 ); }
 .black-05 { color: rgba( 0, 0, 0, .05 ); }
 .white-90 { color: rgba( 255, 255, 255, .9 ); }
 .white-80 { color: rgba( 255, 255, 255, .8 ); }
 .white-70 { color: rgba( 255, 255, 255, .7 ); }
 .white-60 { color: rgba( 255, 255, 255, .6 ); }
 .white-50 { color: rgba( 255, 255, 255, .5 ); }
 .white-40 { color: rgba( 255, 255, 255, .4 ); }
 .white-30 { color: rgba( 255, 255, 255, .3 ); }
 .white-20 { color: rgba( 255, 255, 255, .2 ); }
 .white-10 { color: rgba( 255, 255, 255, .1 ); }
 .black { color: #000; }
 .near-black { color: #111; }
 .dark-gray { color: #333; }
 .mid-gray { color: #555; }
 .gray { color: #777; }
 .silver { color: #999; }
 .light-silver { color: #aaa; }
 .moon-gray { color: #ccc; }
 .light-gray { color: #eee; }
 .near-white { color: #f4f4f4; }
 .white { color: #fff; }
 .dark-red { color: #e7040f; }
 .red { color: #ff4136; }
 .light-red { color: #ff725c; }
 .orange { color: #ff6300; }
 .gold { color: #ffb700; }
 .yellow { color: #ffd700; }
 .light-yellow { color: #fbf1a9; }
 .purple { color: #5e2ca5; }
 .light-purple { color: #a463f2; }
 .dark-pink { color: #d5008f; }
 .hot-pink { color: #ff41b4; }
 .pink { color: #ff80cc; }
 .light-pink { color: #ffa3d7; }
 .dark-green { color: #137752; }
 .green { color: #19a974; }
 .light-green { color: #9eebcf; }
 .navy { color: #001b44; }
 .dark-blue { color: #00449e; }
 .blue { color: #357edd; }
 .light-blue { color: #96ccff; }
 .lightest-blue { color: #cdecff; }
 .washed-blue { color: #f6fffe; }
 .washed-green { color: #e8fdf5; }
 .washed-yellow { color: #fffceb; }
 .washed-red { color: #ffdfdf; }
 .color-inherit { color: inherit; }
 /* Background colors */
 .bg-black-90 { background-color: rgba( 0, 0, 0, .9 ); }
 .bg-black-80 { background-color: rgba( 0, 0, 0, .8 ); }
 .bg-black-70 { background-color: rgba( 0, 0, 0, .7 ); }
 .bg-black-60 { background-color: rgba( 0, 0, 0, .6 ); }
 .bg-black-50 { background-color: rgba( 0, 0, 0, .5 ); }
 .bg-black-40 { background-color: rgba( 0, 0, 0, .4 ); }
 .bg-black-30 { background-color: rgba( 0, 0, 0, .3 ); }
 .bg-black-20 { background-color: rgba( 0, 0, 0, .2 ); }
 .bg-black-10 { background-color: rgba( 0, 0, 0, .1 ); }
 .bg-black-05 { background-color: rgba( 0, 0, 0, .05 ); }
 .bg-white-90 { background-color: rgba( 255, 255, 255, .9 ); }
 .bg-white-80 { background-color: rgba( 255, 255, 255, .8 ); }
 .bg-white-70 { background-color: rgba( 255, 255, 255, .7 ); }
 .bg-white-60 { background-color: rgba( 255, 255, 255, .6 ); }
 .bg-white-50 { background-color: rgba( 255, 255, 255, .5 ); }
 .bg-white-40 { background-color: rgba( 255, 255, 255, .4 ); }
 .bg-white-30 { background-color: rgba( 255, 255, 255, .3 ); }
 .bg-white-20 { background-color: rgba( 255, 255, 255, .2 ); }
 .bg-white-10 { background-color: rgba( 255, 255, 255, .1 ); }
 .bg-black { background-color: #000; }
 .bg-near-black { background-color: #111; }
 .bg-dark-gray { background-color: #333; }
 .bg-mid-gray { background-color: #555; }
 .bg-gray { background-color: #777; }
 .bg-silver { background-color: #999; }
 .bg-light-silver { background-color: #aaa; }
 .bg-moon-gray { background-color: #ccc; }
 .bg-light-gray { background-color: #eee; }
 .bg-near-white { background-color: #f4f4f4; }
 .bg-white { background-color: #fff; }
 .bg-transparent { background-color: transparent; }
 .bg-dark-red { background-color: #e7040f; }
 .bg-red { background-color: #ff4136; }
 .bg-light-red { background-color: #ff725c; }
 .bg-orange { background-color: #ff6300; }
 .bg-gold { background-color: #ffb700; }
 .bg-yellow { background-color: #ffd700; }
 .bg-light-yellow { background-color: #fbf1a9; }
 .bg-purple { background-color: #5e2ca5; }
 .bg-light-purple { background-color: #a463f2; }
 .bg-dark-pink { background-color: #d5008f; }
 .bg-hot-pink { background-color: #ff41b4; }
 .bg-pink { background-color: #ff80cc; }
 .bg-light-pink { background-color: #ffa3d7; }
 .bg-dark-green { background-color: #137752; }
 .bg-green { background-color: #19a974; }
 .bg-light-green { background-color: #9eebcf; }
 .bg-navy { background-color: #001b44; }
 .bg-dark-blue { background-color: #00449e; }
 .bg-blue { background-color: #357edd; }
 .bg-light-blue { background-color: #96ccff; }
 .bg-lightest-blue { background-color: #cdecff; }
 .bg-washed-blue { background-color: #f6fffe; }
 .bg-washed-green { background-color: #e8fdf5; }
 .bg-washed-yellow { background-color: #fffceb; }
 .bg-washed-red { background-color: #ffdfdf; }
 .bg-inherit { background-color: inherit; }
 /* Variables */
 /*
    SPACING
    Docs: http://tachyons.io/docs/layout/spacing/
 
    An eight step powers of two scale ranging from 0 to 16rem.
 
    Base:
      p = padding
      m = margin
 
    Modifiers:
      a = all
      h = horizontal
      v = vertical
      t = top
      r = right
      b = bottom
      l = left
 
      0 = none
      1 = 1st step in spacing scale
      2 = 2nd step in spacing scale
      3 = 3rd step in spacing scale
      4 = 4th step in spacing scale
      5 = 5th step in spacing scale
      6 = 6th step in spacing scale
      7 = 7th step in spacing scale
 
    Media Query Extensions:
      -ns = not-small
      -m  = medium
      -l  = large
 
 */
 .pa0 { padding: 0; }
 .pa1 { padding: .25rem; }
 .pa2 { padding: .5rem; }
 .pa3 { padding: 1rem; }
 .pa4 { padding: 2rem; }
 .pa5 { padding: 4rem; }
 .pa6 { padding: 8rem; }
 .pa7 { padding: 16rem; }
 .pl0 { padding-left: 0; }
 .pl1 { padding-left: .25rem; }
 .pl2 { padding-left: .5rem; }
 .pl3 { padding-left: 1rem; }
 .pl4 { padding-left: 2rem; }
 .pl5 { padding-left: 4rem; }
 .pl6 { padding-left: 8rem; }
 .pl7 { padding-left: 16rem; }
 .pr0 { padding-right: 0; }
 .pr1 { padding-right: .25rem; }
 .pr2 { padding-right: .5rem; }
 .pr3 { padding-right: 1rem; }
 .pr4 { padding-right: 2rem; }
 .pr5 { padding-right: 4rem; }
 .pr6 { padding-right: 8rem; }
 .pr7 { padding-right: 16rem; }
 .pb0 { padding-bottom: 0; }
 .pb1 { padding-bottom: .25rem; }
 .pb2 { padding-bottom: .5rem; }
 .pb3 { padding-bottom: 1rem; }
 .pb4 { padding-bottom: 2rem; }
 .pb5 { padding-bottom: 4rem; }
 .pb6 { padding-bottom: 8rem; }
 .pb7 { padding-bottom: 16rem; }
 .pt0 { padding-top: 0; }
 .pt1 { padding-top: .25rem; }
 .pt2 { padding-top: .5rem; }
 .pt3 { padding-top: 1rem; }
 .pt4 { padding-top: 2rem; }
 .pt5 { padding-top: 4rem; }
 .pt6 { padding-top: 8rem; }
 .pt7 { padding-top: 16rem; }
 .pv0 { padding-top: 0; padding-bottom: 0; }
 .pv1 { padding-top: .25rem; padding-bottom: .25rem; }
 .pv2 { padding-top: .5rem; padding-bottom: .5rem; }
 .pv3 { padding-top: 1rem; padding-bottom: 1rem; }
 .pv4 { padding-top: 2rem; padding-bottom: 2rem; }
 .pv5 { padding-top: 4rem; padding-bottom: 4rem; }
 .pv6 { padding-top: 8rem; padding-bottom: 8rem; }
 .pv7 { padding-top: 16rem; padding-bottom: 16rem; }
 .ph0 { padding-left: 0; padding-right: 0; }
 .ph1 { padding-left: .25rem; padding-right: .25rem; }
 .ph2 { padding-left: .5rem; padding-right: .5rem; }
 .ph3 { padding-left: 1rem; padding-right: 1rem; }
 .ph4 { padding-left: 2rem; padding-right: 2rem; }
 .ph5 { padding-left: 4rem; padding-right: 4rem; }
 .ph6 { padding-left: 8rem; padding-right: 8rem; }
 .ph7 { padding-left: 16rem; padding-right: 16rem; }
 .ma0 { margin: 0; }
 .ma1 { margin: .25rem; }
 .ma2 { margin: .5rem; }
 .ma3 { margin: 1rem; }
 .ma4 { margin: 2rem; }
 .ma5 { margin: 4rem; }
 .ma6 { margin: 8rem; }
 .ma7 { margin: 16rem; }
 .ml0 { margin-left: 0; }
 .ml1 { margin-left: .25rem; }
 .ml2 { margin-left: .5rem; }
 .ml3 { margin-left: 1rem; }
 .ml4 { margin-left: 2rem; }
 .ml5 { margin-left: 4rem; }
 .ml6 { margin-left: 8rem; }
 .ml7 { margin-left: 16rem; }
 .mr0 { margin-right: 0; }
 .mr1 { margin-right: .25rem; }
 .mr2 { margin-right: .5rem; }
 .mr3 { margin-right: 1rem; }
 .mr4 { margin-right: 2rem; }
 .mr5 { margin-right: 4rem; }
 .mr6 { margin-right: 8rem; }
 .mr7 { margin-right: 16rem; }
 .mb0 { margin-bottom: 0; }
 .mb1 { margin-bottom: .25rem; }
 .mb2 { margin-bottom: .5rem; }
 .mb3 { margin-bottom: 1rem; }
 .mb4 { margin-bottom: 2rem; }
 .mb5 { margin-bottom: 4rem; }
 .mb6 { margin-bottom: 8rem; }
 .mb7 { margin-bottom: 16rem; }
 .mt0 { margin-top: 0; }
 .mt1 { margin-top: .25rem; }
 .mt2 { margin-top: .5rem; }
 .mt3 { margin-top: 1rem; }
 .mt4 { margin-top: 2rem; }
 .mt5 { margin-top: 4rem; }
 .mt6 { margin-top: 8rem; }
 .mt7 { margin-top: 16rem; }
 .mv0 { margin-top: 0; margin-bottom: 0; }
 .mv1 { margin-top: .25rem; margin-bottom: .25rem; }
 .mv2 { margin-top: .5rem; margin-bottom: .5rem; }
 .mv3 { margin-top: 1rem; margin-bottom: 1rem; }
 .mv4 { margin-top: 2rem; margin-bottom: 2rem; }
 .mv5 { margin-top: 4rem; margin-bottom: 4rem; }
 .mv6 { margin-top: 8rem; margin-bottom: 8rem; }
 .mv7 { margin-top: 16rem; margin-bottom: 16rem; }
 .mh0 { margin-left: 0; margin-right: 0; }
 .mh1 { margin-left: .25rem; margin-right: .25rem; }
 .mh2 { margin-left: .5rem; margin-right: .5rem; }
 .mh3 { margin-left: 1rem; margin-right: 1rem; }
 .mh4 { margin-left: 2rem; margin-right: 2rem; }
 .mh5 { margin-left: 4rem; margin-right: 4rem; }
 .mh6 { margin-left: 8rem; margin-right: 8rem; }
 .mh7 { margin-left: 16rem; margin-right: 16rem; }
 /*
    NEGATIVE MARGINS
 
    Base:
      n = negative
 
    Modifiers:
      a = all
      t = top
      r = right
      b = bottom
      l = left
 
      1 = 1st step in spacing scale
      2 = 2nd step in spacing scale
      3 = 3rd step in spacing scale
      4 = 4th step in spacing scale
      5 = 5th step in spacing scale
      6 = 6th step in spacing scale
      7 = 7th step in spacing scale
 
    Media Query Extensions:
      -ns = not-small
      -m  = medium
      -l  = large
 
 */
 .na1 { margin: -0.25rem; }
 .na2 { margin: -0.5rem; }
 .na3 { margin: -1rem; }
 .na4 { margin: -2rem; }
 .na5 { margin: -4rem; }
 .na6 { margin: -8rem; }
 .na7 { margin: -16rem; }
 .nl1 { margin-left: -0.25rem; }
 .nl2 { margin-left: -0.5rem; }
 .nl3 { margin-left: -1rem; }
 .nl4 { margin-left: -2rem; }
 .nl5 { margin-left: -4rem; }
 .nl6 { margin-left: -8rem; }
 .nl7 { margin-left: -16rem; }
 .nr1 { margin-right: -0.25rem; }
 .nr2 { margin-right: -0.5rem; }
 .nr3 { margin-right: -1rem; }
 .nr4 { margin-right: -2rem; }
 .nr5 { margin-right: -4rem; }
 .nr6 { margin-right: -8rem; }
 .nr7 { margin-right: -16rem; }
 .nb1 { margin-bottom: -0.25rem; }
 .nb2 { margin-bottom: -0.5rem; }
 .nb3 { margin-bottom: -1rem; }
 .nb4 { margin-bottom: -2rem; }
 .nb5 { margin-bottom: -4rem; }
 .nb6 { margin-bottom: -8rem; }
 .nb7 { margin-bottom: -16rem; }
 .nt1 { margin-top: -0.25rem; }
 .nt2 { margin-top: -0.5rem; }
 .nt3 { margin-top: -1rem; }
 .nt4 { margin-top: -2rem; }
 .nt5 { margin-top: -4rem; }
 .nt6 { margin-top: -8rem; }
 .nt7 { margin-top: -16rem; }
 /*
 
    TEXT DECORATION
    Docs: http://tachyons.io/docs/typography/text-decoration/
 
 
    Media Query Extensions:
      -ns = not-small
      -m  = medium
      -l  = large
 
 */
 .strike { text-decoration: line-through; }
 .underline { text-decoration: underline; }
 .no-underline { text-decoration: none; }
 /*
 
   TEXT ALIGN
   Docs: http://tachyons.io/docs/typography/text-align/
 
   Base
     t = text-align
 
   Modifiers
     l = left
     r = right
     c = center
     j = justify
 
   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large
 
 */
 .tl { text-align: left; }
 .tr { text-align: right; }
 .tc { text-align: center; }
 .tj { text-align: justify; }
 /*
 
    TEXT TRANSFORM
    Docs: http://tachyons.io/docs/typography/text-transform/
 
    Base:
      tt = text-transform
 
    Modifiers
      c = capitalize
      l = lowercase
      u = uppercase
      n = none
 
    Media Query Extensions:
      -ns = not-small
      -m  = medium
      -l  = large
 
 */
 .ttc { text-transform: capitalize; }
 .ttl { text-transform: lowercase; }
 .ttu { text-transform: uppercase; }
 .ttn { text-transform: none; }
 /*
 
    TYPE SCALE
    Docs: http://tachyons.io/docs/typography/scale/
 
    Base:
     f = font-size
 
    Modifiers
      1 = 1st step in size scale
      2 = 2nd step in size scale
      3 = 3rd step in size scale
      4 = 4th step in size scale
      5 = 5th step in size scale
      6 = 6th step in size scale
      7 = 7th step in size scale
 
    Media Query Extensions:
      -ns = not-small
      -m  = medium
      -l  = large
 */
 /*
  * For Hero/Marketing Titles
  *
  * These generally are too large for mobile
  * so be careful using them on smaller screens.
  * */
 .f-6, .f-headline { font-size: 6rem; }
 .f-5, .f-subheadline { font-size: 5rem; }
 /* Type Scale */
 .f1 { font-size: 3rem; }
 .f2 { font-size: 2.25rem; }
 .f3 { font-size: 1.5rem; }
 .f4 { font-size: 1.25rem; }
 .f5 { font-size: 1rem; }
 .f6 { font-size: .875rem; }
 .f7 { font-size: .75rem; }
 /* Small and hard to read for many people so use with extreme caution */
 /*
 
    TYPOGRAPHY
    http://tachyons.io/docs/typography/measure/
 
    Media Query Extensions:
      -ns = not-small
      -m  = medium
      -l  = large
 
 */
 /* Measure is limited to ~66 characters */
 .measure { max-width: 30em; }
 /* Measure is limited to ~80 characters */
 .measure-wide { max-width: 34em; }
 /* Measure is limited to ~45 characters */
 .measure-narrow { max-width: 20em; }
 /* Book paragraph style - paragraphs are indented with no vertical spacing. */
 .indent { text-indent: 1em; margin-top: 0; margin-bottom: 0; }
 .small-caps { font-variant: small-caps; }
 /* Combine this class with a width to truncate text (or just leave as is to truncate at width of containing element. */
 .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 /*
 
    UTILITIES
 
    Media Query Extensions:
      -ns = not-small
      -m  = medium
      -l  = large
 
 */
 /* Equivalent to .overflow-y-scroll */
 .overflow-container { overflow-y: scroll; }
 .center { margin-right: auto; margin-left: auto; }
 .mr-auto { margin-right: auto; }
 .ml-auto { margin-left: auto; }
 /*
 
    VISIBILITY
 
    Media Query Extensions:
      -ns = not-small
      -m  = medium
      -l  = large
 
 */
 /*
     Text that is hidden but accessible
     Ref: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */
 .clip { position: fixed !important; _position: absolute !important; clip: rect( 1px 1px 1px 1px ); /* IE6, IE7 */ clip: rect( 1px, 1px, 1px, 1px ); }
 /*
 
    WHITE SPACE
 
    Media Query Extensions:
      -ns = not-small
      -m  = medium
      -l  = large
 
 */
 .ws-normal { white-space: normal; }
 .nowrap { white-space: nowrap; }
 .pre { white-space: pre; }
 /*
 
    VERTICAL ALIGN
 
    Media Query Extensions:
      -ns = not-small
      -m  = medium
      -l  = large
 
 */
 .v-base { vertical-align: baseline; }
 .v-mid { vertical-align: middle; }
 .v-top { vertical-align: top; }
 .v-btm { vertical-align: bottom; }
 /*
 
   HOVER EFFECTS
   Docs: http://tachyons.io/docs/themes/hovers/
 
     - Dim
     - Glow
     - Hide Child
     - Underline text
     - Grow
     - Pointer
     - Shadow
 
 */
 /*
 
   Dim element on hover by adding the dim class.
 
 */
 .dim { opacity: 1; transition: opacity .15s ease-in; }
 .dim:hover, .dim:focus { opacity: .5; transition: opacity .15s ease-in; }
 .dim:active { opacity: .8; transition: opacity .15s ease-out; }
 /*
 
   Hide child & reveal on hover:
 
   Put the hide-child class on a parent element and any nested element with the
   child class will be hidden and displayed on hover or focus.
 
   <div class="hide-child">
     <div class="child"> Hidden until hover or focus </div>
     <div class="child"> Hidden until hover or focus </div>
     <div class="child"> Hidden until hover or focus </div>
     <div class="child"> Hidden until hover or focus </div>
   </div>
 */
 .hide-child .child { opacity: 0; transition: opacity .15s ease-in; }
 .hide-child:hover  .child, .hide-child:focus  .child, .hide-child:active .child { opacity: 1; transition: opacity .15s ease-in; }
 .underline-hover:hover, .underline-hover:focus { text-decoration: underline; }
 /* Add pointer on hover */
 .pointer:hover { cursor: pointer; }
 /* 
    Add shadow on hover.
 
    Performant box-shadow animation pattern from 
    http://tobiasahlin.com/blog/how-to-animate-box-shadow/ 
 */
 .shadow-hover { cursor: pointer; position: relative; transition: all .5s cubic-bezier( .165, .84, .44, 1 ); }
 .shadow-hover::after { content: ''; box-shadow: 0 0 16px 2px rgba( 0, 0, 0, .2 ); border-radius: inherit; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; transition: opacity .5s cubic-bezier( .165, .84, .44, 1 ); }
 .shadow-hover:hover::after, .shadow-hover:focus::after { opacity: 1; }
 /* Combine with classes in skins and skins-pseudo for 
  * many different transition possibilities. */
 .bg-animate, .bg-animate:hover, .bg-animate:focus { transition: background-color .15s ease-in-out; }
 /*
 
   Z-INDEX
 
   Base
     z = z-index
 
   Modifiers
     -0 = literal value 0
     -1 = literal value 1
     -2 = literal value 2
     -3 = literal value 3
     -4 = literal value 4
     -5 = literal value 5
     -999 = literal value 999
     -9999 = literal value 9999
 
     -max = largest accepted z-index value as integer
 
     -inherit = string value inherit
     -initial = string value initial
     -unset = string value unset
 
   MDN: https://developer.mozilla.org/en/docs/Web/CSS/z-index
   Spec: http://www.w3.org/TR/CSS2/zindex.html
   Articles:
     https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
 
   Tips on extending:
   There might be a time worth using negative z-index values.
   Or if you are using tachyons with another project, you might need to
   adjust these values to suit your needs.
 
 */
 .z-0 { z-index: 0; }
 .z-1 { z-index: 1; }
 .z-2 { z-index: 2; }
 .z-3 { z-index: 3; }
 .z-4 { z-index: 4; }
 .z-5 { z-index: 5; }
 .z-999 { z-index: 999; }
 .z-9999 { z-index: 9999; }
 .z-max { z-index: 2147483647; }
 .z-inherit { z-index: inherit; }
 .z-initial { z-index: initial; }
 .z-unset { z-index: unset; }